<template>
    <div>
        <v-table
                is-vertical-resize
                is-horizontal-resize
                :is-loading="isLoading"
                style="width:95%"
                :min-height='200'
                :columns="columns"
                :table-data="tableData"
                row-hover-color="#eee"
                :column-cell-class-name="columnCellClass"
                @on-custom-comp="customCompFunc"
        ></v-table>
    </div>

</template>

<script>
    import TaskTable from '../table/TaskTable'
    import Vue from 'vue'

    Vue.component('task-table', TaskTable)

    export default {
        name: "Task1",
        components: {
            TaskTable
        },
        data() {
            return {
                isLoading: false,
                tableData: [],
                columns: [{
                    field: 'description',
                    title: '描述',
                    width: 300,
                    titleAlign: 'center',
                    columnAlign: 'center',
                    isResize: true
                },
                    {
                        field: 'jobName',
                        title: '任务名称',
                        width: 200,
                        titleAlign: 'center',
                        columnAlign: 'center',
                        isResize: true
                    },
                    {
                        field: 'jobGroup',
                        title: '分组',
                        width: 200,
                        titleAlign: 'center',
                        columnAlign: 'center',
                        isResize: true
                    },
                    {
                        field: 'status',
                        title: '状态',
                        width: 80,
                        titleAlign: 'center',
                        columnAlign: 'center',
                        isResize: true,
                        formatter: function (rowData) {
                            var statusColor = ""
                            var value = ""
                            if (rowData.status == 0) {
                                statusColor = "#f48c42"
                                value = "暂停"
                            } else if (rowData.status == -1) {
                                statusColor = "#cccccc"
                                value = "删除"
                            } else if (rowData.status == 1) {
                                statusColor = "#4180f4"
                                value = "正常"
                            }
                            return '<span style="color:' + statusColor + ';font-weight: bold;">' + value + '</span>'
                        }
                    }, {
                        field: 'custome-adv',
                        title: '操作',
                        width: 200,
                        titleAlign: 'center',
                        columnAlign: 'center',
                        componentName: 'task-table',
                        isResize: true
                    }]
            }
        },
        methods: {
            customCompFunc(params) {
                debugger
                if (params.type === 'pauseJob') {
                    this.initData()
                    this.$message.success('成功！')
                } else if (params.type === 'testJob') {
                    this.initData()
                    this.$message.success('成功！')
                } else if (params.type === "resumeJob") {
                    this.initData()
                    this.$message.success('成功！')
                } else if (params.type === "deleteJob") {
                    this.initData()
                    this.$message.success('成功！')
                }

            },
            columnCellClass(rowIndex) {
                if (rowIndex % 2 == 0) {
                    return 'title-cell-class-name-test1'
                }
            },
            initData() {
                this.isLoading = true
                this.$axiosGet('/allTask.action').then((res) => {
                    this.tableData = res.data
                    this.isLoading = false
                }).catch((res) => {
                    this.$message.error(res)
                    console.error(res)
                })
            }
        },
        created() {
            this.initData();
        }
    }
</script>

<style>
    .title-cell-class-name-test1 {
        background-color: #edf7ff;
    }


</style>